<template>
  <div class="lay-ot">
    <div class="layout">
      <!--<load :state="loading"></load>-->
      <div class="headContainer">
        <div class="flex-c" style="margin-top: 28px" @click="goToUserRebate">
          <span class="money" v-text="getBalance"></span>
          <span class="money-tip">全部返利（元）</span>
        </div>
        <div class="center" style="justify-content: flex-start; bottom: 32vw; left: 27vw">
          <div class="userAvatar" @click="goToUserEdit">
            <img class="avatar" :src="getAvatar"/>
          </div>
          <div class="userShowInfo" @click="goToUserEdit">
            <div class="userName" v-text="getName"></div>
            <div class="userLevel" v-text="getLevel">{{getLevel}}</div>
            <br/>
            <span class="userId" v-text="getUid"></span>
            <span class="userId" v-text="getRec"></span>
          </div>
          <div class="userQrcode" @click="goToUserQrcode">
            <span class="text_qr">{{userData.userQrcode}}</span>
            <svg class="icon qb" aria-hidden="true">
              <use xlink:href="#icon-qb_gd"></use>
            </svg>
          </div>
        </div>
      </div>
      <!--<div class="moneyContainer">-->
        <!--<div class="flex-r">-->
          <!--<div style="width: 50vw;height: 12vw;" class="center" @click="goToWithdrawHistory">-->
            <!--<svg class="icon tx" aria-hidden="true">-->
              <!--<use xlink:href="#icon-grzx_txjl"></use>-->
            <!--</svg>-->
            <!--<span class="text">提现记录</span>-->
          <!--</div>-->
          <!--<div style="width: 50vw;height: 12vw" class="center" @click="goToUserWithdraw">-->
            <!--<svg class="icon tx" aria-hidden="true">-->
              <!--<use xlink:href="#icon-grzx_wytx"></use>-->
            <!--</svg>-->
            <!--<span class="text">我要提现</span>-->
          <!--</div>-->
        <!--</div>-->
      <!--</div>-->
      <div class="functionContainer">
        <load :state="loading"></load>
        <div class="funTitle">
          <svg class="icon gd" aria-hidden="true">
            <use xlink:href="#icon-grzx_gd"></use>
          </svg>
          <span class="text_gd">更多功能</span>
          <div class="divider"></div>
        </div>
        <div class="tab_bar">
          <router-link v-for="(page,index) in this.skeleton" :to="{path: page.pass}" :key=index class="tab">
            <div class="flex-c">
              <svg class="icon-fun" aria-hidden="true" v-if="page.enable">
                <use :xlink:href="page.icon"></use>
              </svg>
            </div>
            <div class="tab_text" v-if="page.enable">{{page.name}}</div>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  import Cell from '../../components/common/Cell';
  import BtnIconAbove from '../../components/common/BtnIconAbove';
  import Public from '@/assets/js/public';
  import CellSx from '../../components/common/CellSX';
  import Load from '../../components/common/load/load';
  // import Types from '@/store/OperationType';

  export default {
    name: 'user',
    components: {Load, CellSx, BtnIconAbove, Cell},
    data() {
      return {
        loading: false,
        moneyVisibility: true,
        userData: {
          userUid: this.$store.state.login.userUid,
          userName: this.$store.state.login.userName,
          UserRec: this.$store.state.login.userRec,
          userQrcode: '我的二维码',
          userBalance: '获取中',
          userRefund: '',
          avatar: this.$store.state.login.userPic,
          userLevel: JSON.parse(sessionStorage.getItem('user_level'))
        },
        skeleton: JSON.parse(sessionStorage.getItem('user_skeleon'))
      };
    },

    methods: {
      getIcon(icon) {
        return Public.ossImg + icon + '.svg';
      },
      goToUserRebate() {
        this.$router.push({name: 'userRebate'});
      },
      goToUserEdit() {
        this.$router.push({
          name: 'userEdit'
        });
      },
      goToUserQrcode() {
        this.$router.push({name: 'userQrcode'});
      },
      goToUserWithdraw() {
        this.$router.push({name: 'userWithdraw'});
      },
      goToWithdrawHistory() {
        this.$router.push({name: 'withdrawHistory'});
      },
      scrollTop() {
        // 跳转至顶部位置
        window.scrollTo(0, 0);
      }
    },
    computed: {
      getBalance() {
        // todo 绑定余额
        let balance = this.userData.userBalance;
        return balance;
      },
      getAvatar() {
        return this.userData.avatar;
      },
      getName() {
        return this.userData.userName;
      },
      getLevel() {
        console.log('getLevel', this.userData.userLevel, this.$store.state.login.userLevel);
        return this.userData.userLevel;
      },
      getUid() {
        return 'ID:  ' + this.userData.userUid;
      },
      getRec() {
        return '推荐人ID:  ' + this.userData.UserRec;
      }
    },
    watch: {},
    created() {
      this.scrollTop();
      this.$UserReq.getUserBalance()
        .then((res) => {
          console.log('12-getUserBalance', res);
          this.userData.userBalance = Number(res.data.total).toFixed(2);
        });
      if (!sessionStorage.getItem('user_skeleon')) {
        console.log('鸟事啊是第阿萨大厦');
        this.loading = true;
        this.$UserReq.getUserSkeleton()
          .then((res) => {
            console.log('12-2222', res);
            this.skeleton = res.data.nav.more;
            // todo 保存个人中心架构
            // this.$store.commit(Types.SET_USER_SKELETON, res.data.nav.more);
            // 存到session
            sessionStorage.setItem('user_skeleon', JSON.stringify(res.data.nav.more));
            console.log('12-getUserSkeleton', this.skeleton, JSON.parse(sessionStorage.getItem('user_skeleon')));
            this.loading = false;
          }, () => {
            this.loading = false;
          });
      }
      if (!sessionStorage.getItem('user_level')) {
        this.$UserReq.getUserBase()
          .then((res) => {
            console.log('12-getUserBase', res);
            this.userData.userUid = res.data.uid;
            this.userData.userName = res.data.nick;
            this.userData.UserRec = res.data.rec;
            this.userData.avatar = res.data.img;
            this.userData.userLevel = res.data.rank.levelCh;
            // 存到session
            sessionStorage.setItem('user_id', JSON.stringify(res.data.uid));
            sessionStorage.setItem('user_name', JSON.stringify(res.data.nick));
            sessionStorage.setItem('user_rec', JSON.stringify(res.data.rec));
            sessionStorage.setItem('user_avatar', JSON.stringify(res.data.img));
            sessionStorage.setItem('user_level', JSON.stringify(res.data.rank.levelCh));
          });
      }
    }
  };
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../assets/stylus/main.styl";
  .flex-r
    flex-x()

  .flex-c
    flex-y()

  .center
    flex-center()

  .divider
    divider()

  .space
    space()

  .lay-ot
    background: linear-gradient(to bottom right, #923df0, #721fd9); /* 标准的语法（必须放在最后） */
    .layout
      width vw(375)
      height vw(667)
      font-family PingFangSC-Regular
      .headContainer
        width 100vw
        height: vw(196px);
        position relative
        background url("http://yqs1.oss-cn-huhehaote.aliyuncs.com/local/userbackground.jpg")
        background-size vw(375) vw(195.68)
        overflow hidden

      .headContainer:after
        position: absolute
        left -90vw
        right 0
        bottom vw(-180)
        z-index: 1
        content: ''
        width: 280%
        height: vw(196);
        border-radius: 50%
        background-color none

      .money-tip
        word-vw(12, white)
        line-height: vw(17)
        text-align center

      .money
        word-vw(36, white)

      .userAvatar
        justify-content: flex-start
        margin-left vw(20)
        margin-top vw(38)

      .avatar
        box-sizing border-box
        width vw(50)
        height vw(50)
        padding 3px
        border-radius(9vw)

      .userShowInfo
        flex-direction column
        margin-left vw(11)
        margin-top vw(13)
        height: vw(22)
        line-height: vw(22)

      .userName
        position absolute
        flex-direction column
        word-vw(16, white)
        text-align: left
        margin-right vw(5)
        width vw(60)
        ellipsis()

      .userId
        word-vw(14, white)
        margin-right vw(5)

      .userLevel
        position absolute
        background white
        padding-left vw(6)
        padding-right vw(6)
        width vw(60)
        height vw(17)
        border-radius vw(10)
        word-vw(12, main-color)
        line-height vw(17)
        text-align center
        margin-left vw(55)

      .userQrcode
        position absolute
        background white
        height vw(30)
        width vw(90)
        right 0
        top vw(123)
        bottom vw(41)
        border-top-left-radius vw(100)
        border-bottom-left-radius vw(100)
        & .qb {
          width vw(8)
          height vw(8)
          overflow: hidden
          fill main-color
        }

      .text_qr
        word-vw(12, main-color)
        line-height vw(30)
        margin-left vw(13)

      .moneyContainer
        panel()
        background-color white
        position absolute
        left vw(15)
        width vw(345)
        height vw(45)
        border-radius: vw(5)
        margin-top vw(20)
        & .icon {
          width vw(18)
          height vw(18)
          vertical-align: -0.15em
          overflow: hidden
        }
        & .tx {
          fill main-color
          margin-right vw(5)
        }

      .text
        word-vw(14, second-ash)

      .functionContainer
        position absolute
        left vw(15)
        top vw(215)
        width vw(345)
        height vw(205)
        border-radius vw(5)
        background-color white
        & .icon {
          width vw(15)
          height vw(15)
          vertical-align: -0.15em
          overflow: hidden
        }
        & .gd {
          fill third-ash
          margin-left vw(17)
          margin-right vw(8)
        }

      .text_gd
        left vw(40)
        line-height vw(48)
        word-vw(14, first-ash)

      .divider
        divider()
        position absolute
        left vw(8)

      .tab_bar
        display flex
        justify-content: flex-start
        position absolute
        flex-wrap wrap
        top vw(71)
        left vw(23)
        right vw(23)

      .tab
        width 25%
        height vw(67)

      .icon-fun
        width vw(22)
        height vw(22)
        vertical-align: -0.15em;
        overflow: hidden;
        fill main-color

      .tab_text
        flex-center()
        word-vw(14, second-ash)
        margin-top vw(5)

</style>
